<template>
  <BaseDialog
    ref="baseDialog"
    :title="isEdit ? '评估' : '评估'"
    @confrim="confrim"
    @cancel="close"
    width="800px"
  >
    <div class="container">
      <div class="detail" v-if="info">
        <div class="title">旧产品：(点击图片查看细节)</div>
        <div
          class="imgs"
          v-if="info.recycle.imgs && JSON.parse(info.recycle.imgs).length"
        >
          <el-image
            v-for="(el,index) in JSON.parse(info.recycle.imgs)"
            :key="index"
            style="width: 60px; height: 60px"
            :src="el"
            :preview-src-list="[el]"
            fit="cover"
          />
        </div>
        <div>品牌：{{ info.recycle.brand }}</div>
        <div>型号：{{ info.recycle.model }}</div>
        <div>类型：{{ info.recycle.cat }}</div>
        <div>成色：{{ info.recycle.newRate }}</div>
        <div>联系电话：{{ info.recycle.contact }}</div>
        <div>使用时间：{{ info.recycle.hasUsedTime }}</div>
        <div>功率：{{ info.recycle.power }}</div>
        <div>数量：{{ info.recycle.recycleNum }}个</div>
        <div>出厂时间：{{ info.recycle.dateFac }}</div>
        <div>补充说明：{{ info.recycle.note }}</div>
        <div class="title" style="margin-top: 20px">想换产品 
          <i class="el-icon-sort" style="color:#409eff"></i>
        </div>
        <div>
          <el-image
            style="width: 60px; height: 60px"
            :src="JSON.parse(info.recycleDtl.goodsInfo).coverUrl"
            :preview-src-list="[JSON.parse(info.recycleDtl.goodsInfo).coverUrl]"
            fit="cover"
          />
        </div>
        <div>产品名：{{ JSON.parse(info.recycleDtl.goodsInfo).name }}</div>
        <div>数量：{{ info.recycleDtl.num }}</div>

        <div style="margin: 20px 0">
          <div style="color: red; margin-top: 20px">
            如平台不回收/交换此产品，请点击拒绝回收
          </div>
        </div>
      </div>
      <BaseForm
        labelWidth="160px"
        :size="'medium'"
        :fromIems="fromIems"
        ref="BaseForm"
        @submit="submit"
        @edit="edit"
      ></BaseForm>
    </div>
    <template #btns>
      <el-button type="danger" size="small" @click="handleRuse"
        >拒绝回收</el-button
      >
    </template>
  </BaseDialog>
</template>

<script>
import _ from "lodash";
import { edit } from "@/api/menu";
import { Message } from "element-ui";
import { detail, evalOrder } from "@/api/es";
export default {
  data() {
    return {
      title: "",
      fromIems: [
        {
          valueType: "inputNumber",
          label: "评估价",
          dataIndex: "evalPrice",
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "inputNumber",
          label: "应退差价",
          dataIndex: "dltPrice",
          defaultValue: 0,
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "inputNumber",
          label: "应补差价",
          dataIndex: "dlt2Platform",
          defaultValue: 0,
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
        {
          valueType: "input",
          type: "textarea",
          label: "评估说明",
          dataIndex: "evalNote",
          defaultValue: 0,
          props: {
            placeholder: "(例如:成色有点旧，所以只能给这个价格)",
          },
          rules: [{ required: true, message: "请输入", trigger: "blur" }],
        },
      ],
      isEdit: false,
      info: null,
    };
  },
  methods: {
    open(row) {
      // 重新赋值 fromIems 以触发 watch 监听器
      this.fromIems = _.cloneDeep(this.fromIems);
      this.$refs.baseDialog.open();
      this.$nextTick(() => {
        this.$set(this.$refs.BaseForm.form, "evalPrice", 0);
        this.$set(this.$refs.BaseForm.form, "dltPrice", 0);
        this.$set(this.$refs.BaseForm.form, "dlt2Platform", 0);
      });
      this.initDeail(row);
    },
    async initDeail(row) {
      const res = await detail({ id: row.id });
      if (!res.status) {
        this.info = res.content;
      }
    },
    close() {
      this.$refs.baseDialog.close();
      this.$refs.BaseForm.rest();
    },
    confrim() {
      if (this.isEdit) {
        this.$refs.BaseForm.edit();
      } else {
        this.$refs.BaseForm.submit();
      }
    },
    async submit(data) {
      const res = await evalOrder({
        transactionType: this.info.recycle.transactionType,
        id: this.info.recycle.id,
        evalNote: data.evalNote,
        state: 1,
        dltPrice: data.dltPrice,
        dlt2Platform: data.dlt2Platform,
        evalPrice: data.evalPrice, //评估价
      });
      if(!res.status){
        Message.success('评估成功')
        this.$emit('success')
        this.close()
      }
    },
    async edit(data) {
      const res = await evalOrder({
        transactionType: this.info.recycle.transactionType,
        id: this.info.recycle.id,
        evalNote: data.evalNote,
        state: 1,
        dltPrice: data.dltPrice,
        dlt2Platform: data.dlt2Platform,
        evalPrice: data.evalPrice, //评估价
      });
      if(!res.status){
        Message.success('评估成功')
        this.$emit('success')
        this.close()
      }
    },
    async handleRuse() {
      const res = await evalOrder({
        transactionType: this.info.recycle.transactionType,
        id: this.info.recycle.id,
        evalNote: this.$refs.BaseForm.form.evalNote,
        state: -1,
      });
      if(!res.status){
        Message.success('评估成功')
        this.$emit('success')
        this.close()
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.container {
  display: flex;
  .detail {
    width: 50%;
    border: 1px solid #ccc;
    border-radius: 10px;
    display: flex;
    flex-direction: column;
    padding: 25px;
    .title {
      font-weight: bold;
      margin-bottom: 20px;
    }
    .imgs {
      margin-bottom: 20px;
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
    }
  }
}
</style>
